<template>
  <div class="m-wrap">
    <v-toolbar dense tabs flat>
      <v-toolbar-side-icon @click="toggleSide"></v-toolbar-side-icon>

      <v-spacer class="title" v-html="title"></v-spacer>

      <v-btn icon @click="search">
        <v-icon>search</v-icon>
      </v-btn>

      <template v-slot:extension>
        <v-tabs
          v-model="curTab"
          fixed-tabs
          grow
          color="transparent"
          @change="tabChange"
        >
          <v-tabs-slider color="#000"></v-tabs-slider>
          <v-tab href="#tab-1" class="primary--text" @click="toggleMenu">
            技术
            <i class="material-icons" style="font-size:20px;"
              >arrow_drop_down
            </i>
          </v-tab>

          <v-tab href="#tab-2" class="primary--text">
            消息
          </v-tab>

          <v-tab href="#tab-3" class="primary--text">
            节点
          </v-tab>
        </v-tabs>
      </template>
    </v-toolbar>

    <v-tabs-items v-model="curTab" class="tab-wrap">
      <m-menu ref="menu"></m-menu>
      <v-tab-item value="tab-1" class="tab-container">
        <theme-list></theme-list>
      </v-tab-item>
      <v-tab-item value="tab-2" class="tab-container">
        <message-list></message-list>
      </v-tab-item>
      <v-tab-item value="tab-3" class="tab-container">
        <node-list></node-list>
      </v-tab-item>
    </v-tabs-items>
    <m-slide ref="slide" style="flex:0;"></m-slide>
    <m-search ref="search"></m-search>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import mSlide from "./slide.vue";
import mMenu from "./menu.vue";
import themeList from "./themeList.vue";
import messageList from "./messageList.vue";
import nodeList from "./nodeList.vue";
import mSearch from "./search.vue";

@Component({
  components: {
    mSlide,
    mMenu,
    nodeList,
    themeList,
    messageList,
    mSearch
  }
})
export default class Home extends Vue {
  private curTab: string = "tab-1";
  private beforeTab: string = "tab-1";
  private title: string = "V2EX";

  mounted() {
    //@ts-ignore
    this.title = this.$route.query.key;
    console.log(this.$route.query);
  }

  tabChange(curTab: string) {
    if (curTab !== "tab-1") {
      //@ts-ignore
      this.$refs.menu && this.$refs.menu.hide();
    }
    this.beforeTab = curTab;
  }

  toggleMenu() {
    if (this.beforeTab === "tab-1" && this.curTab === "tab-1") {
      //@ts-ignore
      this.$refs.menu && this.$refs.menu.toggle();
    } else {
      this.beforeTab = "tab-1";
    }
  }

  toggleSide() {
    //@ts-ignore
    this.$refs.slide && this.$refs.slide.toggle();
  }

  search() {
    //@ts-ignore
    this.$refs.search && this.$refs.search.toggle();
  }

  //   scroll(pos: any) {
  //     console.log(pos);
  //   }

  //   handlerTouchmove(e: TouchEvent) {
  //     this.touchend = e.touches[0].pageX;
  //     if (Math.abs(this.calcTouchDist) < 15) return;
  //     //@ts-ignore
  //     this.calcTouchDist > 0
  //       ? (this.touchRight = this.calcTouchDist)
  //       : (this.touchLeft = Math.abs(this.calcTouchDist));
  //   }
  //   handlerTouchend(e: TouchEvent) {
  //     const screenW = window.screen.width / 3;
  //     const isSlide = Math.abs(this.calcTouchDist) > screenW;
  //     isSlide && this.touchend > 0 ? this.touchSwitchTab() : this.resetTouch();
  //   }
}
</script>

<style lang="scss" scoped>
.m-wrap {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.title {
  text-align: center;
  font-weight: 700;
}
.primary--text {
  font-size: 16px;
  color: #444;
}
.tab-container {
  height: 100%;
}
.tab-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.rotate-enter-active,
.rotate-leave-active {
  transition: opacity 0.2s;
}

.rotate-enter,
.rotate-leave-to {
  opacity: 0;
}
</style>
